<template>
	<view>
		<u-navbar title="进件查询" bgColor="#fff" class="nav" :placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true">
			<view slot="left">
				<u-icon name="arrow-left" size="12" @click="onClickBack"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="pd">
				<view class="w-flex w-flex-between">
					<view class="startTime" @click="showTime = true" :style="showCurrStartTime !== '请选择日期'?'color:#000;font-size:14px;':''">
						<text>{{showCurrStartTime}}</text>
						<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
					</view>
					<text style="margin: 0 10px;">至</text>
					<view class="startTime" @click="showEndTime = true" :style="showCurrEndTime !== '请选择日期'?'color:#000;font-size:14px;':''">
						<text>{{showCurrEndTime}}</text>
						<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
					</view>
				</view>
				<view class="pd">
					<u-datetime-picker
						:show="showTime"
						:value="startTime"
						mode="date"
						@cancel="cancel"
						@confirm="confirmTime"
						:maxDate="maxDate"
						:formatter="formatter"
					></u-datetime-picker>
					<u-datetime-picker
						:show="showEndTime"
						:value="endTime"
						mode="date"
						@cancel="cancelEndTime"
						@confirm="confirmEndTime"
						:maxDate="maxDate"
						:formatter="formatter"
					></u-datetime-picker>
				</view>
			</view>
			<view class="w-flex w-flex-between w-mt-20 timerChoice pd w-mb-20">
				<text class="dateStyle" @click="timerToday">今日</text>
				<text class="dateStyle" @click="timerWeek">近一周</text>
				<text class="dateStyle" @click="timerMonth">近一月</text>
			</view>
			<view class="gap"></view>
			<view class="w-mt-15 pd w-pb-10">
				<view>
					商户状态
				</view>
				<view class="w-mt-15">
					<u-checkbox-group
						v-model="MerchantStatus"
						placement="row"
						@change="MerchantStatusChange"
						style="display: flex;flex-wrap: wrap;"
					>
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in MerchantStatusList"
							:key="index"
							:label="item.name"
							:name="item.name"
							style="width: 33%;"
							shape="circle"
							size="14"
							labelSize="12"
							labelColor="#7e7e7e"
						>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="gap"></view>
			<view class="w-mt-15 pd w-pb-10">
				<view>
					商户等级
				</view>
				<view class="w-mt-15">
					<u-checkbox-group
						v-model="MerchantGrade"
						placement="row"
						@change="MerchantGradeChange"
						style="display: flex;flex-wrap: wrap;"
					>
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in MerchantGradeList"
							:key="index"
							:label="item.name"
							:name="item.name"
							style="width: 33%;"
							shape="circle"
							size="14"
							labelSize="12"
							labelColor="#7e7e7e"
						>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="gap"></view>
			<view class=" pd">
				<u--form
					labelPosition="left"
					:model="formData"
					ref="form1" >
					<u-form-item
						label="商户编号"
						prop="number"
						borderBottom
						labelWidth="80"
						ref="item1">
						<u--input v-model="formData.number" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item
						label="商户简称"
						prop="name"
						borderBottom
						labelWidth="80"
						ref="item1">
						<u--input v-model="formData.name" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item
						label="直属代理商"
						prop="agent"
						borderBottom
						labelWidth="80"
						ref="item1">
						<u--input v-model="formData.agent" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item
						label="业务员账号"
						prop="account"
						borderBottom
						labelWidth="80"
						ref="item1">
						<u--input v-model="formData.account" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					
				</u--form>
				
			</view>
			<view class="w-flex w-flex-between w-pt-15" style="background: #F1F1F1;">
				<u-button @click="reset" class="w-w-40 radius">重置</u-button>
				<u-button @click="submit" class="w-w-40 radius"  type="primary">确认</u-button>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
	
</template>

<script>
import {getPreMonth} from  "@/util/common.js"
export default {
	data() {
		return {
			showTime: false,
			showEndTime: false,
			startTime: getPreMonth(1),
			endTime: Number(new Date()),
			maxDate: Number(new Date()),
			showCurrEndTime: '请选择日期',
			showCurrStartTime: '请选择日期',
			MerchantStatus: [],
			MerchantStatusList: [
				{
					id: 1,
					name: '资料待完善'
				},
				{
					id: 2,
					name: '带审核'
				},
				{
					id: 3,
					name: '审核通过'
				},
				{
					id: 4,
					name: '审核不通过'
				}
			],
			MerchantGrade: [],
			MerchantGradeList: [
				{
					id: 1,
					name: '注册用户'
				},
				{
					id: 2,
					name: '基础用户'
				},
				{
					id: 3,
					name: '认证用户'
				},
				{
					id: 4,
					name: '企业用户'
				}
			],
			formData: {
				number: '',
				name: '',
				agent: '',
				account: ''
			}
		}
	},
	methods: {
		// 返回页面
		onClickBack () {
			uni.navigateBack()
		},
		cancel () {
			this.showTime = false
		},
		cancelEndTime () {
			this.showEndTime = false
		},
		confirmEndTime (date) {
			this.showEndTime = false
			this.showCurrEndTime = this.format(date.value)
		},
		confirmTime (date) {
			this.showCurrStartTime = this.format(date.value)
			this.showTime = false
		},
		formatter(type, value) {
			if (type === 'year') {
					return `${value}年`
			}
			if (type === 'month') {
					return `${value}月`
			}
			if (type === 'day') {
					return `${value}日`
			}
			return value
		},
		format(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var time = new Date(shijianchuo);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		MerchantStatusChange (list) {
			this.MerchantStatus = list
			console.log(list)
		},
		MerchantGradeChange (list) {
			this.MerchantGrade = list
			console.log(list)
		},
		timerToday () {
			this.showCurrStartTime = this.format(Number(new Date()));
			this.showCurrEndTime = this.format(Number(new Date()));
		},
		timerWeek () {
			this.showCurrStartTime = this.format(Number(new Date().getTime() - 3600 * 1000 * 24 * 7));
			this.showCurrEndTime = this.format(Number(new Date()));
		},
		timerMonth () {
			this.showCurrStartTime = getPreMonth(1);
			this.showCurrEndTime = this.format(Number(new Date()));
		},
		reset () {
			this.formData.number = ''
			this.formData.name = ''
			this.formData.agent = ''
			this.formData.account = ''
		},
		submit () {
			if (this.formData.number === '') {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "请输入商户编号",
				})
				return
			}
			if (this.formData.name === '') {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "请输入商户简称",
				})
				return
			}
			if (this.formData.agent === '') {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "请输入直属代理商",
				})
				return
			}
			if (this.formData.account === '') {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "请输入业务员账号",
				})
				return
			}
			let params = {
				MerchantGrade: this.MerchantGrade,
				MerchantStatus: this.MerchantStatus,
				showCurrStartTime: this.showCurrStartTime,
				showCurrEndTime: this.showCurrEndTime,
				number: this.formData.number,
				name: this.formData.name,
				agent: this.formData.agent,
				account: this.formData.account,
			}
			console.log(params)
		}
	}
}
</script>

<style lang="scss" scoped>
	.content {
		background: #FFFFFF;
		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 320rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.start_time {
			width: 30%;
		}
		.pd {
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
		/deep/ .u-form-item__body__left__content__label,
		/deep/ .uni-input-placeholder {
			font-size: 12px;
		}
		.gap {
			width: 100%;
			height: 30rpx;
			background: #F1F1F1;
		}
	}
.radius {
	border-radius: 12rpx;
}
</style>
